<!--
  商品管理组件
-->
<script>
export default {
  data() {
    return {
      ruleForm: {
        picture: '',
        imageUrl: '',
      },
      dialogFormTitle: '',
      // 商品属性
      propertyGoods: {
        id: '',
        name: '',
        region: '',
        picture: '',
        money: '',
      },
      tableData: [],
      allGoodsType: [],
      dialogFormVisible: false,
      formLabelWidth: '140px',
    };
  },
  methods: {
    handleClose(done) {
      done();
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {
      //     });
    },
    // 查询所有商品类型
    findAllGoodsType() {
      this.$http.get("/goods/findAllType")
          .then((res) => {
            this.allGoodsType = res.data;
          });
    },

    // 查询所有商品
    findAllGoods() {
      this.$http.get("/goods/findAllGoods")
          .then((res) => {
            console.info(res)
            res.data.forEach(item => {
              item.picture = "http://localhost:2001/picture/" + item.picture + ".jpg";
            });
            this.tableData = res.data;
          });
    },

    // 打开用于编辑的模态框
    showModuleForHandleEdit(index, row) {
      console.log("打开编辑")
      console.info(row)
      this.ruleForm.imageUrl = row.picture
      this.dialogFormTitle = "编辑" + row.name
      this.propertyGoods.id = row.id;
      this.propertyGoods.picture = row.picture;
      this.propertyGoods.name = row.name;
      this.propertyGoods.region = row.typeId;
      this.propertyGoods.money = row.money;
      this.dialogFormVisible = true
      this.findAllGoodsType();
    },

    // 修改商品的上下架
    upAndDown(row) {
      this.$http.post("/goods/updateStateOfGoodsById", {id: row.id, state: row.state === 1 ? 0 : 1})
          .then((res) => {
            if (res.data.code !== 200) {
              this.$message.error('操作失败');
              return;
            }
            this.findAllGoods();
            this.$message({type: 'success', message: `已${row.state === 1 ? "下架" : "上架"}${row.name}`});
          });
    },
    editModuleOff() {
      this.dialogFormVisible = false
    },
    // 模态框确定
    editModulePut() {
      //发请求 修改商品信息
      console.log("请求前的传输的数")
      console.info(this.propertyGoods)
      this.$http.post('/goods/updateGoodsInfoByGoodsId', this.propertyGoods)
          .then(res => {
            if (res.data.msg === 1) {
              this.$message.success("修改成功")
              this.findAllGoods();
            } else {
              this.$message.error("修改失败")
            }
          })
      this.dialogFormVisible = false

      // 暂未写完 修改图片 传参
    },
    // 上传图片成功之后执行
    handleAvatarSuccess(res, file) {
      console.log("图片回显路径")
      console.info(res.data)
      this.propertyGoods.picture = res.data;
      this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传图片之前执行
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {
    this.findAllGoods();
    console.log('GoodsAdmin准备完成');
  }
};
</script>

<template>
  <div>
    <!-- 编辑商品模态框 开始 -->
    <el-dialog
        width="500px" style="height: 1000px;"
        :title="dialogFormTitle"
        :visible.sync="dialogFormVisible"
        :before-close="handleClose">
      <el-form :model="propertyGoods" style="height: 450px">

        <el-form-item label="商品图片" style="margin: 0 0 0 60px">
          <el-upload class="avatar-uploader"
                     action="http://localhost:2001/goods/addGoodsPicture"
                     :with-credentials="true"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <!-- ruleForm.imageUrl 图片的路径-->
            <el-image v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>

        </el-form-item>
        <br>

        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="propertyGoods.name" autocomplete="off" class="formInput"/>
        </el-form-item>

        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-select v-model="propertyGoods.region" placeholder="商品类型" class="formInput">
            <el-option :label="item.name" :value="String(item.id)" v-for="item in allGoodsType" :key="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="propertyGoods.money" autocomplete="off" class="formInput"/>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editModuleOff()">取 消</el-button>
    <el-button type="primary" @click="editModulePut()">确 定</el-button>
  </span>
    </el-dialog>
    <!-- 编辑商品模态框 结束 -->


    <div class="">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="编号" prop="id" width="80"/>

        <el-table-column label="图片" width="220" align="center">
          <template #default="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.picture" fit="cover"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="名称" prop="name" width="220"/>
        <el-table-column label="类型" prop="goodsType.name"/>
        <el-table-column label="价格（元/斤）" prop="money"/>
        <el-table-column label="库存">
          <template #default="scope">
            <div v-if="scope.row.count >= 0 && scope.row.count <=3" style="color: red">{{ scope.row.count }}</div>
            <div v-else>{{ scope.row.count }}</div>
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template #default="scope">
            <el-button type="success" v-if="scope.row.state === 1" @click="upAndDown(scope.row)">已上架</el-button>
            <el-button type="danger" v-else @click="upAndDown(scope.row)">已下架</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="showModuleForHandleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<style scoped>
.bianJiModel {
  height: 800px;
}

.formInput {
  width: 300px;
}

.addFormWidth {
  width: 300px;
}

.el-form {
  width: 500px;
  height: 800px;
}


.avatar, .avatar-uploader {
  width: 200px;
  height: 200px;
  display: block;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader :hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
</style>